<template>
    <div class="edit-or-add-model" v-if="state.open" ref="editAddModal">
        <a-modal 
            width="700px"
            wrapClassName="custom-modal"
            :bodyStyle="{height:'400px',overflowY:'overlay',overflowX:'hidden',paddingRight:'6px'}"
            v-model:open="state.open" 
            :title="state.flag==='add'?'添加':'编辑'" 
            cancelText="取消"
            okText="确定"
            @ok="handleOk"
            @cancel="handleCancel"
            :getContainer="() => $refs.editAddModal"
        >
            <a-form
                ref="formRef"
                :model="state.ruleForm"
                name="menu-form"
                autocomplete="off"
                @finish="onFinish"
                labelAlign="right"
                :label-col="{ span: 6 }"
            >
                <a-row :gutter="35">
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="上级菜单"
                            name="pid"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-cascader 
                                v-model:value="state.ruleForm.pid" 
                                :options="props.menuList" 
                                placeholder=""  
                                :field-names="{ label: 'title', value: 'id', children: 'children' }"
                                :changeOnSelect="true"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="菜单类型"
                            name="type"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '菜单类型不为空!' }]"
                        >
                            <a-radio-group v-model:value="state.ruleForm.type">
                                <template v-for="item in useMapDictList('MenuTypeEnum')" :key="item.value">
                                    <a-radio :value="+item.value">{{ item.label }}</a-radio>
                                </template>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="菜单名称"
                            name="title"
                            :label-col="{ span: 6 }"
                            :wrapper-col="{ span: 18 }"
                            :rules="[{ required: true, message: '菜单名称不为空!' }]"
                        >
                            <a-input v-model:value="state.ruleForm.title"/>
                        </a-form-item>
                    </a-col>

                    <template v-if="state.ruleForm.type ===1 || state.ruleForm.type ===2">
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="路由名称"
                                name="name"
                            >
                                <a-input v-model:value="state.ruleForm.name"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="路由路径"
                                name="path"
                            >
                                <a-input v-model:value="state.ruleForm.path"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="组件路径"
                                name="component"
                            >
                                <a-input v-model:value="state.ruleForm.component"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="菜单图标"
                                name="icon"
                            >
                                <icon-select v-model="state.ruleForm.icon"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="重定向"
                                name="redirect"
                            >
                                <a-input v-model:value="state.ruleForm.redirect"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="链接地址"
                                name="outLink"
                            >
                                <a-input v-model:value="state.ruleForm.outLink"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="菜单排序"
                                name="orderNo"
                            >
                                <a-input-number v-model:value="state.ruleForm.orderNo"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="是否隐藏"
                                name="isHide"
                            >
                                <a-radio-group v-model:value="state.ruleForm.isHide">
                                    <a-radio :value="true">隐藏</a-radio>
                                    <a-radio :value="false">不隐藏</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="是否缓存"
                                name="isKeepAlive"
                            >
                                <a-radio-group v-model:value="state.ruleForm.isKeepAlive">
                                    <a-radio :value="true">缓存</a-radio>
                                    <a-radio :value="false">不缓存</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="是否固定"
                                name="isAffix"
                            >
                                <a-radio-group v-model:value="state.ruleForm.isAffix">
                                    <a-radio :value="true">固定</a-radio>
                                    <a-radio :value="false">不固定</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="是否内嵌"
                                name="isIframe"
                            >
                                <a-radio-group v-model:value="state.ruleForm.isIframe">
                                    <a-radio :value="true">内嵌</a-radio>
                                    <a-radio :value="false">不内嵌</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                    </template>
                    
                    <template v-if="state.ruleForm.type === 3">
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="权限标识"
                                name="permission"
                            >
                                <a-input v-model:value="state.ruleForm.permission"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item
                                label="菜单排序"
                                name="orderNo"
                            >
                                <a-input-number v-model:value="state.ruleForm.orderNo"/>
                            </a-form-item>
                        </a-col>
                    </template>

                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="是否启用"
                            name="status"
                        >
                            <a-radio-group v-model:value="state.ruleForm.status">
                                <a-radio :value="1">启用</a-radio>
                                <a-radio :value="2">不启用</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="备注信息"
                            name="remark"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-textarea :rows="2" v-model:value="state.ruleForm.remark"/>
                        </a-form-item>
                    </a-col>

                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { nextTick, reactive,ref, watch } from 'vue';
import iconSelect from './iconSelect.vue';
import { cloneDeep } from 'lodash';
import { apiSysMenuUpdatePost,apiSysMenuAddPost } from '@/api/sys/sysMenu';
import { useMapDictList } from '@/hooks';
import { findParentPath, showMsg } from '@/utils';
const props = withDefaults(defineProps<{
    menuList:Array<any>
}>(),{
})
const emits = defineEmits<{
    (e: 'handleQuery', ): void
}>()

const formRef = ref()
const  editAddModal = ref()
const state = reactive<any>({
    open: false,
    flag:'add',
    ruleForm:{},
})

const handleOk =async () => {
    formRef.value.validate().then(async()=>{
        let submitData = cloneDeep(state.ruleForm)
        if (Array.isArray(submitData.pid)) {
            submitData.pid = submitData.pid[submitData.pid.length - 1]
        }
        if(state.flag === 'add'){
            await apiSysMenuAddPost(submitData)
        }
        if(state.flag == 'edit'){
            await apiSysMenuUpdatePost(submitData)
        }
        showMsg('操作成功','success')
        setTimeout(()=>{
            handleCancel()
            emits('handleQuery')
        },100)
    })
};
const handleCancel = () => {
    state.open = false
    state.ruleForm = {}
    state.flag = 'add'
};
const handleOpen = (row:any,flag:string) => {
    state.open = true
    state.ruleForm = cloneDeep(row)
    if (row.pid > 0 ) {
        state.ruleForm.pid = findParentPath(props.menuList, row.pid)
    }
    state.flag=flag
    nextTick(()=>{
        formRef.value.clearValidate()
    })
};

const onFinish = (values: any) => {
    console.log('Success:', values);
};

defineExpose({
    handleOpen
})
</script>

<style lang="scss" scoped>
:deep(.ant-modal-body){
    overflow-y: scroll;
    &::-webkit-scrollbar {
        width: 6px;
        background: transparent;
        opacity: 0;
        transition: opacity 0.3s;
    }
    &:hover::-webkit-scrollbar {
        opacity: 1;
    }
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
        border-radius: 4px;
    }
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
    &:hover::-webkit-scrollbar-thumb {
        background-color: #a19e9e;
        &:hover {
            background-color: #ccc;
        }
    }
}
:deep(.ant-form-item){
    margin-bottom: 10px;
}
</style>